.spacer, .aSpacer
    width 1rem
    height @width

.dimmer
    position fixed
    background-color rgba(0, 0, 0, 0.3)
    left 0
    right 0
    top 0
    bottom 0
    width 100%
    height 100%
    z-index 20

.modal, .panel
    box-sizing border-box
    background background
    border 1px solid borderBright
    border-radius br
    position relative

.modal
    position fixed
    left 50%
    top 50%
    transform translate(-50%, -50%) translateZ(0)
    filter blur(0px)
    backface-visibility hidden
    max-height 90%
    overflow auto
    box-shadow 0 2px 5px rgba(0, 0, 0, 0.35)

.view
    overflow auto
    background backgroundDeeper
    position absolute
    left 0
    right 0
    top 0
    bottom 0
    border-top 0
    .view
        border 0

.inset
    background backgroundDeeper
    padding 1rem
    margin 0 -1rem
    border-top 1px solid borderPale

.aStripedList
    margin 0.5rem 0
    padding 0
    li
        list-style none
        padding 0.2em 0.8em
        margin 0
        border-bottom 1px solid borderPale
        &:last-child
            border-bottom 0


// Меню выбора - список
.aMenu
    @extends .aStripedList
    overflow auto
    font-weight 400
    & + &
        margin-top 1rem
    li
        cursor pointer
        overflow hidden
        text-overflow ellipsis
        white-space nowrap
        {trans}
        &:hover, &.hover
            {transshort}
            border-bottom-color borderBright
            color acttext
            padding 0.2em 0.5em 0.2em 1.1em
        & > svg:first-child, & > .spacer:first-child
            color act
            margin-right 0.5rem
            {trans}
        & > .spacer:first-child
            width 1.5rem
            height 1.5rem
            display inline-block
        &:active, &.active
            background act
            border-bottom-color transparent
            color background
            & > svg:first-child, & > .spacer:first-child
                color background

// панели управления
.nav
    background background
    border-radius br
    border-top 1px solid borderBright
    border-left 1px solid borderBright
    &.vertical
        border 0
        border-radius 0
    padding 0
    margin 0
    display flex
    flex-direction row
    &.vertical
        display block
    li
        text-align center
        cursor pointer
        border-right 1px solid borderPale
        border-bottom 1px solid borderBright
        flex auto
        list-style none
        padding 0.25em
        margin 0
        {trans}
        box-shadow 0 0 background inset
        &:hover, &.active
            {transshort}
            color acttext
            & > svg
                {transshort}
                color accent1
            box-shadow 0 -2px accent1 inset
        &:active
            background acttext
            color background
            box-shadow 0 -2px acttext inset
            & > svg
                color background
        &:first-child
            border-top-left-radius inherit
            border-bottom-left-radius inherit
        &:last-child
            border-top-right-radius inherit
            border-bottom-right-radius inherit
    &.vertical li
        text-align initial
        border-right 0
        border-bottom 1px solid borderPale
        padding 0.25rem 1rem
        overflow hidden
        text-overflow ellipsis
        white-space nowrap
        &:hover, &.active
            box-shadow -2px 0 accent1 inset
        &:active
            box-shadow -2px 0 acttext inset
        &:last-child
            border-bottom 0


// resource cards
.cards, .Cards
    list-style none
    padding 0
    display grid
    grid-template-columns repeat(auto-fill, minmax(17em, 1fr))
    grid-gap 0.3em
    flex-grow 0
    li, .aCard
        background background
        padding 0.8em
        margin 0
        box-sizing border-box
        border 1px solid borderPale
        border-radius 3px
        display inline-block
        vertical-align top
        cursor pointer
        transition 0.35s ease all
        &:hover
            border-color acttext
        &:active
            border-color accent1
            background act
            color background
        span
            font-family consolas, monospace
            width calc(14.5em - 64px)
            display inline-block
            text-overflow ellipsis
            white-space nowrap
            overflow hidden
        > .date
            display none
        & > img, & > svg:not(.aStartingRoomIcon)
            float left
            height 64px
            width 64px
            margin -0.5em 1em -0.5em -0.5em
            border-radius br
            &:hover
                background rgba(act, 0.35)
        & > svg:not(.aStartingRoomIcon)
            stroke-width 1
            width 48px
            height 3.5rem
    &.list
        display block
    &.list li
        display flex
        flex-flow row nowrap
        margin 0
        padding 0.5rem 1rem
        border-radius 0
        width auto
        &:hover
            background act
            color background
        span
            flex 1 1 auto
            order 4
            line-height 1.5rem
            text-align left
        > .date
            display block
            flex 0 0 auto
            width 6rem
            font-size 80%
            text-align center
            font-family fonts
            order 10
        & + li
            border-top 0
        & > img
            float none
            height 1.5rem
            width 1.5rem
            margin 0 1rem 0 0
            flex 0 0 auto
            order 2
        &:first-child
            border-top-left-radius br
            border-top-right-radius br
        &:last-child
            border-bottom-left-radius br
            border-bottom-right-radius br
    &.largeicons
        grid-template-columns repeat(auto-fill, minmax(15em, 1fr))
        li
            text-align center
            position relative
        img
            float none
            max-width 13.5em
            max-height 10em
            margin 0
            width auto
            height auto
        span
            font-family consolas, monospace
            width 12.5em
            text-overflow ellipsis
            white-space nowrap
            overflow hidden
.aCard-Actions
    position absolute
    top 0.5rem
    right 0.5rem
    opacity 0
    {trans}
    .aCard:hover &, .aCard:focus &
        opacity 1
sounds-panel, rooms-panel
    .cards li img:hover
        background none

.anErrorNotice
    background mix(error, background, 10%)
    border 1px solid error
    border-radius br
    padding 0.5rem 1rem
    line-height 1.5
    position absolute
    margin-top 0.5rem
    color error
    z-index 100
    transform-origin 50% -0.5rem
    &::before
        background mix(error, background, 10%)
        content ''
        left 50%
        top -0.33rem
        position absolute
        width 0.5rem
        height 0.5rem
        border-left 1px solid error
        border-top 1px solid error
        transform translate(-0.25rem, 0) rotate(45deg)

.nicetable, .aNiceTable, .aPaddedTable
    border-spacing 0
    td, th
        padding 0.5rem 0.75rem
        margin 0
        &:first-child
            padding-left 0
        &:last-child
            padding-right 0
    th
        border-bottom 1px solid borderBright
        text-align left
.nicetable, .aNiceTable
    margin 1rem 0
    border 1px solid borderBright
    border-radius br
    {shadamb}
    td, th
        &:first-child
            padding-left 1.5rem
        &:last-child
            padding-right 1.5rem
.aTableWrap
    overflow-y auto
    .nicetable, .aNiceTable
        width max-content

.anIllustration
    color act
